Fix problems with BottomSheet and the report dialog
#3297
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…oller # Conflicts: # src/components/Dialog/types.ts
|
The Pull Request introduced fingerprint changes against the base commit: 81bc3ed Fingerprint diff[
{
"type": "file",
"filePath": "package.json",
"reasons": [
"expoConfigPlugins"
],
"hash": "2b56de89831e43f2242ec8c3f95426aa04fd21bc"
}
]Generated by PR labeler 🤖 |
pfrazee
approved these changes
Mar 20, 2024
estrattonbailey
added a commit
that referenced
this pull request
Mar 21, 2024
* origin/main: (60 commits) Fix missing error on `PostThread` (#3295) Fix dialogs state references, fixes Android back button (#3314) [Statsig] Protect against early logEvent call crashing (#3315) Fix android splash jump (#3316) [Statsig] Onboarding and routing events (#3302) Fix problems with `BottomSheet` and the report dialog (#3297) bump pkg json version Adjust DateField timezone offset Fix key error on choose account Move some things around Bump button size on choose account Password flow tweaks Login form tweaks Remove log StepInfo tweaks Signup shell tweaks HostingProvider tweaks fix pencil svg in asset folder sort imports for files related to this PR dismiss keyboard when opening dialog ...
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Why
Currently, when selecting the text input box in a report dialog, the input gets hidden behind the keyboard. This isn't great, as it requires the user to scroll down after selecting the box. It also messes with our "swipe to dismiss" gesture, since we have to stop using the
on-dragkeyboard dismiss mode.Solution
@gorhom/bottom-sheetfound at https://github.com/discord/react-native-bottom-sheet. I've forked this again over to https://github.com/bluesky-social/react-native-bottom-sheet for us to use in ourpackage.json.Keyboard.dismiss()foronTouchDowncallbacks.keyboardDidShowevent to callscrollToEnd()on theScrollViewwhenever the keyboard appears.Future
Using React Native's
keyboardDidShowevent isn't the optimal solution for iOS. It does not fire until the entire keyboard shows. There are some libraries that handle this, however as @pfrazee predicted, they do not play very well with the bottom sheet. This might be something worth investigating in the future if we feel like giving it some time.https://github.com/kirillzyusko/react-native-keyboard-controller is one option that uses Reanimated and provides us with an
onMovecallback. This could work as a solution, however it comes with new difficulties on Android. This will require a deeper dive to figure out what our best option is on the two different platforms.Screen_Recording_20240320_141949_Bluesky.mp4
Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-03-20.at.14.22.59.mp4